<template>
	<view>
		<nav-bar :title="$t('聊天列表')" leftIcon="left"></nav-bar>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="scrollBtn">
			<view @click="gotoChat(item.userId)" class="item" v-for="item in userList" :key="item">
				<image src="@/static/user.png" class="img" />
				<view class="text">
					<view style="color: #fff; margin-bottom: 10rpx;">
						{{ item.userId }}
						<text style="margin-left: 10rpx;font-size: 22rpx;">{{ item.createTimeStr }}</text>
					</view>
					<view style="color: #fff;word-wrap: break-word;width: 590rpx;">{{ item.messageText }}</view>
				</view>
				<view v-if="!item.readStatus" class="qiu"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import i18n from '@/locale/index'
import { axios, socketUrl } from '@/service/request.js'
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";


const scrollTop = ref(0)
const page = ref({
	pageNum: 1,
	pageSize: 20
})
const total = ref(0)
const userList = ref([])

let time

onShow(() => {
	scrollTop.value = 0
	page.value = {
		pageNum: 1,
		pageSize: 20
	}
	userList.value = []
	getUserList()
	clearInterval(time)
	time = setInterval(() => {
		getUserList(1)
	}, 20000);
})

onUnload(() => {
	clearInterval(time)
})
onHide(() => {
	clearInterval(time)
})

//获取用户列表
async function getUserList(val) {
	if (val) {
		page.value.pageNum = 1
		userList.value = []
	}
	const res = await axios('messageBoard/getMessageBoards', {
		pageNum: page.value.pageNum,
		pageSize: page.value.pageSize
	})
	total.value = res.total
	userList.value = userList.value.length ? [...userList.value, ...res.records] : [...res.records]
}

//滚动事件
function scroll(e) {

}

//滚动到底部
function scrollBtn() {
	page.value.pageNum++
	getUserList()
	if (userList.value.length >= total.value) {
		return uni.showToast({
			title: `${i18n.global.t('没有更多了')}!`,
			icon: 'none',
		})
	}
}

//跳转到聊天页面
function gotoChat(id) {
	uni.navigateTo({
		url: `/pages/chat/chat?id=${id}`
	})
}
</script>

<style lang="scss">
.scroll-Y {
	height: calc(100vh - 5rem);
	padding: 0 30rpx;

	.item {
		position: relative;
		display: flex;
		// align-items: center;
		width: calc(100vw - 60rpx);
		background-color: #081C26;
		border-radius: 50rpx;
		margin-bottom: 5rpx;


		.img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.qiu {
			position: absolute;
			top: 0;
			left: 0;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: red;
		}
	}
}
</style>